<script setup lang="ts">
import { useYkEditorDrawStore } from '../../store'
import { Cell, Graph } from '@antv/x6'
import { saveToJSON } from '@yk/components/draw/editor-draw/utils'
import { ObjectUtil } from '@utils/object-util'

const store = useYkEditorDrawStore()
const toolbar = computed(() => store.toolbar)
// 订阅画布实例
const graph = computed(() => store.graph as Graph)
// 当前选中的Cell
const selectCell = ref<Cell>(null)
// 是节点
const isNode = shallowRef(false)
// 是边
const isEdge = shallowRef(false)

onMounted(() => {
  // --
})
onBeforeUnmount(function () {
  unbindSelect()
})

// region TODO 显示边线工具
function toggleEdgeToolState (set?: boolean) {
  const el = store.graph.options.container
  const property = '--selection-box-edge--pointer-events'
  const condition = set ?? !store.toolbar.showEdgeTool
  if (condition) {
    el.style.setProperty(property, 'none')
    store.toolbar.showEdgeTool = true
  } else {
    el.style.setProperty(property, 'auto')
    store.toolbar.showEdgeTool = false
  }
}
// endregion

// region TODO 显示节点连接桩
function toggleNodePortState (set?: boolean) {
  const el = store.graph.options.container
  const className = 'hide-port'
  const condition = set ?? !store.toolbar.showNodePort
  if (condition) {
    el.classList.remove(className)
    store.toolbar.showNodePort = true
  } else {
    el.classList.add(className)
    store.toolbar.showNodePort = false
  }
}
// endregion

// region TODO 保存
function saveGraph () {
  saveToJSON(store.graph as Graph)
}
// endregion

// region TODO 更新当前选中的Cell
function bindSelect () {
  if (graph.value) {
    graph.value.on('cell:selected', selectCellHandle)
    graph.value.on('cell:unselected', selectCellHandle)
  }
}
function unbindSelect () {
  graph.value.off('cell:selected', selectCellHandle)
  graph.value.off('cell:unselected', selectCellHandle)
}
function selectCellHandle () {
  const cells = graph.value.getSelectedCells()
  if (cells.length > 0) {
    // 获取选中项
    const cell = cells[0]
    selectCell.value = cell
    // 判断节点还是边
    isNode.value = cell.isNode()
    isEdge.value = cell.isEdge()
  } else {
    // 全部取消选中，清理数据
    selectCell.value = null
  }
}
// endregion

// region TODO 置顶置底
const zIndexUtil = {
  toFront () {
    if (selectCell.value) selectCell.value.toFront()
  },
  toBack () {
    if (selectCell.value) selectCell.value.toBack()
  }
}
// endregion

// region TODO 交互禁用元素
function toggleEnableInteractingDisableState (set?: boolean) {
  const el = store.graph.options.container
  const className = 'disable-event'
  const condition = set ?? !store.toolbar.enableInteractingDisable
  if (condition) {
    el.classList.remove(className)
    store.toolbar.enableInteractingDisable = true
  } else {
    el.classList.add(className)
    store.toolbar.enableInteractingDisable = false
  }
}
// endregion

// region TODO 设为默认线
function setDefaultLineStyle () {
  const { attrs, router, connector, sourceMarker, targetMarker } = selectCell.value as any
  store.defaultLineStyle = ObjectUtil.copy({
    attrs,
    router,
    connector,
    sourceMarker,
    targetMarker
  })
  ElMessage.success('设置默认线完成')
}
// endregion

// region TODO 初始化
const stopInitWatch = watch(() => store.graph, () => {
  initToolbar()
  stopInitWatch()
  bindSelect()
})

function initToolbar () {
  toggleEdgeToolState(toolbar.value.showEdgeTool)
  toggleNodePortState(toolbar.value.showNodePort)
}
// endregion

const win = window
</script>

<template>
  <div class="toolbar">
    <el-menu
      style="height: 28px;"
      class="px-2 overflow-hidden"
      mode="horizontal"
    >
      <!--<el-sub-menu index="1" popper-class="toolbar-sub-menu">-->
      <!--  <template #title>文件</template>-->
      <!--  <el-menu-item index="1-1" @click="saveAndCloseGraph">保存并关闭</el-menu-item>-->
      <!--</el-sub-menu>-->
      <el-sub-menu index="2" popper-class="toolbar-sub-menu">
        <template #title>工具</template>
        <el-menu-item index="2-1" :class="{ active: toolbar.showNodePort }" @click="toggleNodePortState()">显示节点连接桩</el-menu-item>
        <el-menu-item index="2-2" :class="{ active: toolbar.showEdgeTool }" @click="toggleEdgeToolState()">显示边线工具</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3" popper-class="toolbar-sub-menu">
        <template #title>编辑</template>
        <el-menu-item index="3-1" :class="{ active: toolbar.enableInteractingDisable }" @click="toggleEnableInteractingDisableState()">允许交互禁用元素</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <div class="p-1 d-flex align-items-center" style="height: 32px;padding: 4px;display: flex;">
      <div class="tools-bar-btn" title="返回">
        <el-button size="small" @click="win.close()">关闭</el-button>
      </div>
      <div class="tools-bar-btn" title="保存">
        <img class="icon" src="./images/Save.svg" alt="" @click="saveGraph">
      </div>
      <template v-if="selectCell">
        <div class="tools-bar-btn" title="置顶" />
        <div class="tools-bar-btn" title="置底">
          <el-button size="small" @click="zIndexUtil.toBack()">置底</el-button>
        </div>
      </template>
      <div v-if="selectCell && selectCell.shape === 'edge'" class="tools-bar-btn" title="设为默认线">
        <el-button size="small" @click="setDefaultLineStyle()">设为默认线</el-button>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.toolbar {
  height: 60px;
  background-color: white;
  box-shadow: 0 3px 6px 0 rgba(119, 119, 119, 0.2);
  position: relative;
  z-index: 2;
  .tools-bar-btn {
    min-width: 24px;
    //aspect-ratio: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    &.is-active {
      background-color: rgba(159, 162, 166, 0.4);
    }
    .icon {
      width: 20px;
      cursor: pointer;
    }
  }
}
.toolbar:deep {
  .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
    color: var(--el-text-color-primary);
    border-bottom: 2px solid transparent;
  }
  .el-sub-menu__title {
    padding: 0 10px;
  }
  .el-icon.el-sub-menu__icon-arrow {
    display: none;
  }
  .el-input-group__append, .el-input-group__prepend {
    padding: 0 8px;
  }
  .el-input-number.is-controls-right .el-input__wrapper {
    padding-left: 4px;
    padding-right: 18px;
  }
  .el-input-number--small {
    .el-input-number__increase, .el-input-number__decrease {
      width: 14px;
    }
  }
}

.toolbar-sub-menu {
  .el-menu-item.is-active {
    color: var(--el-text-color-primary);
  }
  .el-menu-item.active {
    color: var(--el-color-primary);
  }
}

</style>
